import React, { useState } from "react";
import "./TodoHeader.css";
export default function TodoHeader(props) {
  //解构赋值
  let {addTodo} = props;
  //声明状态
  let [title, setTitle] = useState("");
  return (
    <div className="todo-header">
      <input
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        type="text"
        placeholder="请输入你的任务名称，按回车键确认"
        onKeyUp={(e) => {
          // console.log(e.code);
          //判断按下的是否为回车
          if(e.code === 'Enter'){
            //判断是否为空
            if(!title) return;
            //新增任务
            // console.log(title);
            addTodo(title);
            //清空输入框
            setTitle('');
          }
        }}
      />
    </div>
  );
}
